<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
    var FormApp = React.createClass({
        getInitialState: function () {
            return {
                inputValue: 'input value',
                selectValue: 'A',
                radioValue: 'B',
                checkValues: [],
                textareaValue: 'some text here,,,,,'
            }
        },
        handleSubmit: function (e) {
            e.preventDefault();

            var formData = {
                input: this.refs['goodInput'].value,
                select: this.refs['goodSelect'].value,
                textarea: this.refs['goodTextarea'].value,
                radio: this.state.radioValue,
                check: this.state.checkValues,
            }

            console.log('the form result is:')
            console.log(formData);
            /*
                //获取数据的几种不同的方式
                this.refs['goodInput'].value
                this.refs.goodInput.value
                ReactDOM.findDOMNode(this.refs['goodInput']).value
            */

            this.refs['goodRadio'].saySomething();

        },
        handleRadio: function (e) {
            this.setState({
                radioValue: e.target.value,
            })
        },
        handleCheck: function (e) {
            var checkValues = this.state.checkValues.slice();
            var newVal = e.target.value;
            var index = checkValues.indexOf(newVal);
            if (index == -1) {
                checkValues.push(newVal)
            } else {
                checkValues.splice(index, 1);
            }

            this.setState({
                checkValues: checkValues,
            })
        },
        render: function () {
            return (
                    <form onSubmit={this.handleSubmit}>
                    {/* 可以设置ref为function，以便在加载的时候设置对象的焦点
                    ref={function(comp) { ReactDOM.findDOMNode(comp).focus();}} 
                    */}
                        <input ref="goodInput" type="text" defaultValue={this.state.inputValue }/>
                        <br/>
                    选项：
                        <select defaultValue={ this.state.selectValue } ref="goodSelect">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                        </select>
                        <br/>
                        <p>radio button!</p>
                        <RadioButtons ref="goodRadio" handleRadio={this.handleRadio} />
                        <br/>

                        <Checkboxes handleCheck={this.handleCheck} />
                        <br/>
                        <textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
                        <button type="submit">提交</button>

                    </form>
            )
        }
    });

    var RadioButtons = React.createClass({
        saySomething: function () {
            alert("yo what's up man!");
        },
        render: function () {
            return (
                    <span>
                    A
                        <input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/>
                    B
                        <input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked value="B"/>
                    C
                        <input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/>
                    </span>
            )
        }
    });

    var Checkboxes = React.createClass({
        render: function () {
            return (
                    <span>
                    A
                        <input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="A"/>
                    B
                        <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B" />
                    C
                        <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C" />
                    </span>
            )
        }
    })


    var formApp = ReactDOM.render(
            <FormApp />,
            document.getElementById('app')
    )

</script>
</body>
</html>